<template>
   <ul>
      <!-- 会员继承 -->
      <li>
         <div class="liTop">
            <div class="titleleft">会员继承</div>
            <div class="contentright">
               <el-switch v-model="SystemData.SystemConfig.CONFIG_VIP_INHERIT" />
            </div>
         </div>
         <div class="liBottom">
            <div class="liBottom-left"></div>
            <div class="liBottom-right">
               <p>关闭后，用户全局会员无法在当前据点享受全局会员权限</p>
            </div>
         </div>
      </li>
      <!-- 会员图标 -->
      <li>
         <div class="liTop">
            <div class="titleleft">会员图标</div>
            <div class="contentright">
               <input type="text" v-model="SystemData.SystemConfig.CONFIG_VIP_ICON">
            </div>
         </div>
         <div class="liBottom">
            <div class="liBottom-left"></div>
            <div class="liBottom-right">
               <p>留空则使用全局默认会员图标</p>
            </div>
         </div>
      </li>
      <!-- 充值选项 -->
      <li>
         <div class="liTop">
            <div class="titleleft">充值选项</div>
            <div class="contentright">
               <el-button type="primary" @click="Add_vip_pay_option">添加选项</el-button>
            </div>
         </div>
         <div class="liBottom">
            <div class="liBottom-left"></div>
            <div class="liBottom-right">
               <p>当前据点会员充值选项，请先关闭会员继承,(注意：ID请不要出现相同)</p>
               <div class="licontent">
                  <el-table :data="SystemData.SystemConfig.CONFIG_VIP_PAY_OPTION" stripe style="width: 100%"
                     max-height="230">
                     <el-table-column prop="id" label="ID">
                        <template #default="row">
                           <el-input v-model="row.row.id" />
                        </template>
                     </el-table-column>
                     <el-table-column prop="money" label="价格">
                        <template #default="row">
                           <el-input v-model="row.row.money" />
                        </template>
                     </el-table-column>
                     <el-table-column prop="vipday" label="会员时长">
                        <template #default="row">
                           <el-input v-model="row.row.vipday" />
                        </template>
                     </el-table-column>
                     <el-table-column prop="_id" label="操作" fixed="right" width="100">
                        <template #default="row">
                           <div style="display: flex;">
                              <el-button type="warning" @click="Del_vip_pay_option(row.row.id)">删除</el-button>
                           </div>
                        </template>
                     </el-table-column>
                  </el-table>
               </div>
            </div>
         </div>
      </li>
      <!-- 隐藏权限 -->
      <!-- <li>
         <div class="liTop">
            <div class="titleleft">隐藏内容权限</div>
            <div class="contentright">
               <el-button type="primary" @click="Add_vip_pay_option">添加选项</el-button>
            </div>
         </div>
         <div class="liBottom">
            <div class="liBottom-left"></div>
            <div class="liBottom-right">
               <p>当前配置是发布帖子时，隐藏内容权限的访问选项。</p>
               <div class="licontent">
                  <el-table :data="SystemData.SystemConfig.config_posts_contents_permission" stripe style="width: 100%"
                     max-height="230">
                     <el-table-column prop="id" label="ID">
                        <template #default="row">
                        </template>
                     </el-table-column>
                     <el-table-column prop="pname" label="权限名">
                        <template #default="row">
                           <el-input v-model="row.row.pname" />
                        </template>
                     </el-table-column>
                     <el-table-column prop="disabled" label="是否禁用" fixed="right" width="100">
                        <template #default="row">
                           <el-switch v-model="row.row.disabled" />
                        </template>
                     </el-table-column>
                  </el-table>
               </div>
            </div>
         </div>
      </li> -->
      <!-- 资源下载权限 -->
      <!-- <li>
         <div class="liTop">
            <div class="titleleft">资源下载权限</div>
            <div class="contentright">
               <el-button type="primary" @click="Add_vip_pay_option">添加选项</el-button>
            </div>
         </div>
         <div class="liBottom">
            <div class="liBottom-left"></div>
            <div class="liBottom-right">
               <p>当前配置是发布帖子时，资源下载权限的访问选项。</p>
               <div class="licontent">
                  <el-table :data="SystemData.SystemConfig.config_posts_resource_permission" stripe style="width: 100%"
                     max-height="230">
                     <el-table-column prop="id" label="ID">
                        <template #default="row">
                        </template>
                     </el-table-column>
                     <el-table-column prop="pname" label="权限名">
                        <template #default="row">
                           <el-input v-model="row.row.pname" />
                        </template>
                     </el-table-column>
                     <el-table-column prop="disabled" label="是否禁用" fixed="right" width="100">
                        <template #default="row">
                           <el-switch v-model="row.row.disabled" />
                        </template>
                     </el-table-column>
                  </el-table>
               </div>
            </div>
         </div>
      </li> -->
      <!-- 轮播图配置 -->
      <li>
         <div class="liTop">
            <div class="titleleft">轮播图配置</div>
            <div class="contentright">
               <el-button type="primary" @click="Add_slideshow">添加轮播图</el-button>
            </div>
         </div>
         <div class="liBottom">
            <div class="liBottom-left"></div>
            <div class="liBottom-right">
               <p>请注意，图片地址请不要设置相同，这会导致删除按键发生冲突</p>
               <div class="licontent">
                  <el-table :data="SystemData.SystemConfig.config_slideshow" stripe style="width: 100%" max-height="230">
                     <el-table-column prop="img" label="图片">
                        <template #default="row">
                           <el-input v-model="row.row.img" />
                        </template>
                     </el-table-column>
                     <el-table-column prop="path" label="跳转地址">
                        <template #default="row">
                           <el-input v-model="row.row.path" />
                        </template>
                     </el-table-column>
                     <el-table-column prop="title" label="标题">
                        <template #default="row">
                           <el-input v-model="row.row.title" />
                        </template>
                     </el-table-column>
                     <el-table-column prop="text" label="副字">
                        <template #default="row">
                           <el-input v-model="row.row.text" />
                        </template>
                     </el-table-column>
                     <!-- <el-table-column prop="disabled" label="跳转方式" fixed="right" width="100">
                                       <template #default="row">
                                          <el-switch v-model="row.row.disabled" />
                                       </template>
                                    </el-table-column> -->
                     <el-table-column prop="_id" label="操作" fixed="right" width="100">
                        <template #default="row">
                           <div style="display: flex;">
                              <el-button type="warning" @click="Del_slideshow(row.row.img)">删除</el-button>
                           </div>
                        </template>
                     </el-table-column>
                  </el-table>
               </div>
            </div>
         </div>
      </li>
   </ul>
   <button class="save" @click="updateConfig">保存配置</button>
</template>
<script lang="ts" setup >
import { storeToRefs } from 'pinia';
import { ElMessage } from "element-plus";
const { userinfo } = storeToRefs(cnyzsUserpinia())
const props = defineProps({
   SystemData: {
      type: Object,
      default: {
         SystemInfo: {},
         SystemConfig: {},
         SystemAnnounceList: [],
         SystemUserInfo: [],
         SystemUserList: [],
         SystemClassifyList: [],
         SystemPostsList: [],
      }
   }
})

// 添加充值选项
const Add_vip_pay_option = () => {
   props.SystemData.SystemConfig.CONFIG_VIP_PAY_OPTION.push({
      id: 0,
      money: 0,
      vipday: 0
   })
}
// 删除充值选项
const Del_vip_pay_option = (id: number) => {
   props.SystemData.SystemConfig.CONFIG_VIP_PAY_OPTION.forEach((element: any, index: any) => {
      if (element.id === id) {
         props.SystemData.SystemConfig.CONFIG_VIP_PAY_OPTION.splice(index, 1)
      }
   });
}
// 添加一项轮播图
const Add_slideshow = () => {
   props.SystemData.SystemConfig.config_slideshow.push({
      img: 'https://alan-1252409695.cos.ap-guangzhou.myqcloud.com/images%2Fwallhaven-eomv8l.png',
      path: '/',
      title: 'AOIR',
      text: '多元化独立web应用程序',
   })
}
// 删除一项轮播图
const Del_slideshow = (img: string) => {
   props.SystemData.SystemConfig.config_slideshow.forEach((element: any, index: any) => {
      if (element.img === img) {
         props.SystemData.SystemConfig.config_slideshow.splice(index, 1)
      }
   });
}



// 保存配置
const updateConfig = () => {
   // 據點創建者
   if (props.SystemData.SystemInfo.systemCreateUser._id === userinfo.value._id) return save()
   // 據點管理員
   if (props.SystemData.SystemInfo.systemAuth.some((v: any) => v._id === userinfo.value._id)) return save()
   async function save() {
      let newdata = JSON.parse(JSON.stringify(props.SystemData.SystemConfig))
      const res: any = await cnyzsRequest('/api/cnyzs-system-config/update', { method: 'POST', data: newdata })
      if (res.status === 200) return ElMessage.success(res.message)
      ElMessage.warning(res.message)
   }
}
</script>
<style lang="scss" scoped>
::-webkit-scrollbar-thumb {
   background-color: var(--aoir-color-primary-2);
   border-radius: 15px;
}

input {
   width: 300px;
   color: #555;
   height: 45px;
   border: 0;
   font-size: 16px;
   background-color: #FFF;
   border-bottom: 1px solid #f5f6f7;
   margin-bottom: 5px;
   border-radius: 4px;
   caret-color: var(--aoir-color-primary-2);
   padding: 0 10px;
   border-radius: var(--aoir-border-radius);
   box-shadow: 0 0 35px 0 rgba(108, 108, 108, 0.1);
}

.save {
   position: absolute;
   right: 30px;
   bottom: 30px;
   border: 0;
   padding: 8px 16px;
   background-color: var(--aoir-color-primary);
   color: #FFF;
   border-radius: 6px;
   cursor: pointer;
   transition: all .2s;
   display: flex;
   align-items: center;
   box-shadow: 0 0 50px 0 rgba(74, 74, 74, 0.187);
   margin-left: 15px;
   font-size: 15px;
   z-index: 10;

   &:hover {
      opacity: .7;
   }
}

ul {
   width: 100%;
   display: flex;
   flex-direction: column;

   li {
      width: 100%;
      padding: 10px 0px 10px 0;
      border-bottom: 1px solid #eeeeee85;


      .liTop {
         display: flex;
         align-items: center;
         margin-bottom: 5px;

         .titleleft {
            width: 120px;
            margin-right: 20px;
            display: flex;
            // align-items: center;
            justify-content: flex-end;
            // color: var(--aoir-color-primary);
            color: #666666;
            font-size: 15px;
            font-weight: 700;
         }

         .contentright {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;

            button {
               border: 0;
               padding: 6px 14px;
               background-color: var(--aoir-color-primary);
               color: #FFF;
               border-radius: 6px;
               cursor: pointer;
               transition: all .2s;
               display: flex;
               align-items: center;
               box-shadow: 0 0 5px 0 rgba(74, 74, 74, 0.141);
               margin-right: 15px;
               font-size: 14px;
               font-weight: 700;
            }
         }
      }

      .liBottom {
         display: flex;

         .liBottom-left {
            width: 120px;
            margin-right: 20px;
            display: flex;
            justify-content: flex-end;
            color: #777;
            font-size: 14px;
         }

         .liBottom-right {
            flex: 1;

            p {
               font-size: 13px;
               color: #999;
               margin-bottom: 10px;

               span {
                  color: var(--aoir-color-primary);
               }
            }

            .licontent {
               width: 100%;
               min-height: 50px;
            }
         }
      }

   }
}
</style>